<template>
  <view>
    <u-navbar title="完善档案" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="" style="margin-top: 20rpx; background: #fff">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">姓名</view>
        <view class="" style="font-size: 28rpx; color: #666; padding-right: 28rpx">
          {{ data.patient_name }}
        </view>
      </view>
      <!-- <view class=""
				style="display: flex;align-items: center;justify-content: space-between;height: 99rpx;border-bottom: 1rpx solid #E7E7E7;">
				<view class="" style="font-size: 28rpx;padding-left: 29rpx;">
					身份证号码
				</view>
				<view class="" style="font-size: 28rpx;color: #666;padding-right: 28rpx;">
					410303******0518
				</view>
			</view> -->
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">性别</view>
        <view class="" style="font-size: 28rpx; color: #666; padding-right: 28rpx">
          {{ data.patient_gender_text }}
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">出生日期</view>
        <view class="" style="font-size: 28rpx; color: #666; padding-right: 28rpx" @tap="show = true">
          {{ year }}
          <!-- 1997-01-24 -->
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">手机号码</view>
        <view class="" style="font-size: 28rpx; color: #666; padding-right: 28rpx">
          <input type="text" placeholder="请输入手机号" style="font-size: 26rpx; color: #999999; width: 200rpx" v-model="phone" />
          <!-- {{data.patient_mobile}} -->
        </view>
      </view>
    </view>
    <!-- 身高体重 -->
    <view class="" style="margin-top: 20rpx; background: #fff">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">身高</view>
        <view class="" style="display: flex; align-items: center; padding-right: 35rpx">
          <input type="text" placeholder="请输入身高" style="font-size: 26rpx; color: #999999; width: 130rpx" v-model="patient_height" />
          <text style="font-size: 28rpx; padding-left: 26rpx">cm</text>
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">体重</view>
        <view class="" style="display: flex; align-items: center; padding-right: 35rpx">
          <input type="text" placeholder="请输入体重" style="font-size: 26rpx; color: #999999; width: 130rpx" v-model="patient_weight" />
          <text style="font-size: 28rpx; padding-left: 26rpx">kg</text>
        </view>
      </view>
    </view>
    <!-- 过敏实 -->
    <view class="" style="margin-top: 20rpx; background: #fff">
      <view class="" style="border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding: 35rpx 28rpx">添加既往病史：</view>
        <view class="" style="margin: 0 27rpx">
          <u-input v-model="illness_three" :type="type" :border="false" :height="height" :auto-height="autoHeight" placeholder="请输入既往病史" />
        </view>
      </view>
      <view class="" style="border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding: 35rpx 28rpx">添加过敏史：</view>
        <view class="" style="margin: 0 27rpx">
          <u-input v-model="illness_two" :type="type" :border="false" :height="height" :auto-height="autoHeight" placeholder="请输入过敏史" />
        </view>
      </view>
      <view class="" style="border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding: 35rpx 28rpx">添加病情描述：</view>
        <view class="" style="margin: 0 27rpx">
          <u-input v-model="illness_one" :type="type" :border="false" :height="height" :auto-height="autoHeight" placeholder="请输入家族史" />
        </view>
      </view>
    </view>
    <!-- 生活方式 -->
    <view class="" style="height: 110rpx; line-height: 110rpx; font-size: 28rpx; padding-left: 31rpx">生活方式</view>
    <!-- 是否有规律运动 -->
    <view class="" style="background: #fff; display: flex; align-items: center; justify-content: space-between; height: 287rpx">
      <view class="" style="font-size: 28rpx; padding-left: 31rpx">是否有规律运动</view>
      <view class="" style="font-size: 28rpx; padding-right: 74rpx">
        <view class="" @tap="radio = 1">
          <radio :checked="radio == 1 ? true : false" color="#17A6FF" style="transform: scale(0.7)"></radio>
          是
        </view>
        <view class="" @tap="radio = 2" style="padding-top: 10rpx">
          <radio :checked="radio == 2 ? true : false" color="#17A6FF" style="transform: scale(0.7)"></radio>
          否
        </view>
        <view class="" @tap="radio = 3" style="padding-top: 10rpx">
          <radio :checked="radio == 3 ? true : false" color="#17A6FF" style="transform: scale(0.7)"></radio>
          适当
        </view>
      </view>
    </view>
    <!-- 婚姻 -->
    <view class="" style="margin-top: 20rpx; background: #fff; padding-bottom: 45rpx">
      <view class="" style="border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding: 35rpx 28rpx">职业：</view>
        <view class="" style="margin: 0 27rpx">
          <u-input v-model="zhiye" :type="type" :border="false" :height="height" :auto-height="autoHeight" placeholder="请输入职业" />
        </view>
      </view>

      <view class="" style="border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding: 35rpx 28rpx">运动爱好:</view>
        <view class="" style="margin: 0 27rpx">
          <u-input v-model="hot" :type="type" :border="false" :height="height" :auto-height="autoHeight" placeholder="请输入运动爱好" />
        </view>
      </view>

      <view class="" style="height: 47rpx"></view>
      <view
        class=""
        style="font-size: 30rpx; height: 100rpx; border-radius: 10rpx; background: #f8f8f8; display: flex; align-items: center; justify-content: space-between; margin: 0 28rpx"
        @tap="show1 = true"
      >
        <view class="" style="padding-left: 33rpx">
          {{ give }}
        </view>
        <view class="" style="padding-right: 40rpx">
          <u-icon name="arrow-down" color="#222222"></u-icon>
        </view>
      </view>
      <!-- <view class=""
				style="font-size: 30rpx;height: 100rpx;border-radius: 10rpx;background: #F8F8F8;display: flex;align-items: center;justify-content: space-between;margin: 30rpx 28rpx;">
				<view class="" style="padding-left: 33rpx;">
					职业
				</view>
				<view class="" style="padding-right: 40rpx;">
					<u-icon name="arrow-down" color="#222222"></u-icon>
				</view>
			</view> -->
      <!-- <view class=""
				style="font-size: 30rpx;height: 100rpx;border-radius: 10rpx;background: #F8F8F8;display: flex;align-items: center;justify-content: space-between;margin: 30rpx 28rpx;">
				<view class="" style="padding-left: 33rpx;">
					运动爱好
				</view>
				<view class="" style="padding-right: 40rpx;">
					<u-icon name="arrow-down" color="#222222"></u-icon>
				</view>
			</view> -->
      <view
        class=""
        style="font-size: 30rpx; height: 100rpx; border-radius: 10rpx; background: #f8f8f8; display: flex; align-items: center; justify-content: space-between; margin: 30rpx 28rpx"
        @tap="show2 = true"
      >
        <view class="" style="padding-left: 33rpx">
          {{ sex }}
        </view>
        <view class="" style="padding-right: 40rpx">
          <u-icon name="arrow-down" color="#222222"></u-icon>
        </view>
      </view>
    </view>
    <!-- 工作环境描述 -->
    <view class="" style="margin-top: 20rpx; background: #fff">
      <view class="" style="font-size: 28rpx; padding: 25rpx 0 29rpx 50rpx">工作环境描述</view>
      <view class="" style="margin: 0 28rpx; background: #f8f8f8; border-radius: 20rpx; padding-left: 29rpx">
        <u-input v-model="value_six" type="textarea" :border="false" height="216" :auto-height="autoHeight" placeholder="请输入" />
      </view>

      <view class="btn" @tap="save">保存</view>
    </view>
    <u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
    <u-picker mode="selector" v-model="show1" :default-selector="[0]" :range="arr" range-key="name" @confirm="confirm1"></u-picker>
    <u-picker mode="selector" v-model="show2" :default-selector="[0]" :range="arr1" range-key="name" @confirm="confirm2"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      value: '',
      type: 'textarea',

      height: 100,
      autoHeight: true,
      radio: 1,
      data: {},
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      show: false,
      show1: false,
      show2: false,
      year: '请选择',
      phone: '',
      patient_weight: '',
      patient_height: '',
      illness_three: '',
      illness_one: '',
      illness_two: '',
      arr: [{ name: '已婚' }, { name: '未婚' }],
      arr1: [{ name: '有' }, { name: '无' }],
      zhiye: '',
      hot: '',
      give: '婚育史',
      sex: '性生活',
      value_five: '',
      value_two: '',
      value_six: ''
    };
  },

  methods: {
    shan() {
      this.api({
        url: '/api//index/getDefault',
        method: 'post'
      }).then((res) => {
        this.data = res.data;
        this.phone = res.data.patient_mobile;
        this.illness_one = res.data.illness_one;
        this.illness_three = res.data.illness_three;
        this.illness_two = res.data.illness_two;
        this.patient_height = res.data.patient_height;
        this.patient_weight = res.data.patient_weight;
        this.zhiye = res.data.value_three;
        this.hot = res.data.value_four;
        this.value_six = res.data.value_six;
        if (this.value_two == 1) {
          this.give = '已婚';
        } else {
          this.give = '未婚';
        }
        if (this.value_five == 1) {
          this.sex = '有';
        } else {
          this.sex = '无';
        }
      });
    },
    // 出生年月日
    confirm(e) {
      console.log(e);
      this.year = e.year + '-' + e.month + '-' + e.day;
    },
    // 婚育
    confirm1(e) {
      console.log(e);
      let num = e[0];
      this.value_two = num == 0 ? 1 : 2;
      this.give = this.arr[num].name;
    },
    // 性生活
    confirm2(e) {
      console.log(e);
      let num = e[0];
      this.value_five = num == 0 ? 1 : 2;
      this.sex = this.arr1[num].name;
    },
    save() {
      this.api({
        url: '/api//healthy/profile',
        method: 'post',
        data: {
          patient_height: this.patient_height,
          patient_weight: this.patient_weight,
          illness_one: this.illness_one,
          illness_two: this.illness_two,
          illness_three: this.illness_three,
          value_one: this.radio == 1,
          value_two: this.value_two,
          value_three: this.zhiye,
          value_four: this.hot,
          value_five: this.value_five,
          value_six: this.value_six
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        uni.navigateBack();
      });
    }
  },
  onShow() {
    this.shan();
  }
};
</script>

<style>
page {
  background: #f8f8f8;
}

.btn {
  margin: 78rpx 115rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
}
</style>
